<template>
  <el-container id="container-wrapper">
    <el-header height="auto">
      <el-row type="flex" justify="space-between">
        <el-col :span="12" class="header-left">
          <el-button type="primary" icon="el-icon-upload"></el-button>
          <el-button type="primary" icon="el-icon-mobile-phone"></el-button>
          <el-button type="primary" icon="el-icon-edit" @click="isCollapse = !isCollapse"></el-button>
        </el-col>
        <el-col :span="12" class="header-right">
          <el-button type="primary" icon="el-icon-edit"></el-button>
        </el-col>
      </el-row>
    </el-header>
    <el-container>
      <el-aside width="200px" v-show="!isCollapse">
        <el-menu 
          collapse-transition="false" 
          @select="triggerSubMenu" 
          background-color="#424F63"
          text-color="#CFCFCF"
          active-text-color="#65CEA7"
          default-active="home"
          :defaultOpeneds="defaultOpeneds"
          unique-opened>
          <el-submenu 
            v-for="(menu, index) in menus" 
            :key="index"
            :index="menu.title">
            <template slot="title">
              <i :class="menu.iconClass"></i>
              <span slot="title">{{ menu.title }}</span>
            </template>
            <el-menu-item 
              v-for="(subMenu, subMenuIndex) in menu.subMenus" 
              :key="subMenuIndex"
              :index="subMenu.title"
              :action="subMenu.action">
              <i :class="subMenu.iconClass"></i>
              <span slot="title">{{ subMenu.title }}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <el-main>
        <el-tabs v-model="currentTab" type="border-card" @tab-remove="removeTab" ref="tabContent">
          <el-tab-pane
            v-for="(item, index) in editableTabs"
            :key="index"
            :label="item.title"
            :name="item.name"
            :closable="item.closable"
          >
            <iframe :src="item.src" target="_self"></iframe>
          </el-tab-pane>
        </el-tabs>
      </el-main>
    </el-container>
    <el-footer height="20px" v-show="true"></el-footer>
  </el-container>
</template>

<script>
export default {
  data() {
    return {
      menus: [],
      isCollapse: false,
      currentTab: '',
      editableTabs: [],
      defaultOpeneds: ["home"]
    };
  },
  mounted: function () {
    // add homepage by default
    this.addTab("home", "/page/spa");

    // just a menu test
    this.menus = [
      {
        title: "home",
        iconClass: "el-icon-upload",
        action: "/page/spa",
        subMenus: [
          {
            title: "element",
            iconClass: "el-icon-upload",
            action: "http://element-cn.eleme.io/"
          },
          {
            title: "vuejs",
            iconClass: "el-icon-upload",
            action: "http://cn.vuejs.org"
          },
          {
            title: "baidu",
            iconClass: "el-icon-upload",
            action: "http://baidu.com"
          }
        ]
      }
    ];

    window.onresize = () => {
      this.adjustIframe();
    }
  },
  methods: {
    adjustIframe() {
      // use nextTick to ensure dom rendered
      this.$nextTick(function () {
        const children = this.$refs.tabContent.$children;
        let elementHeader = children[0].$el;
        let parentHeight = this.$refs.tabContent.$el.clientHeight;
        let headerHeight = elementHeader.clientHeight;
        let adjustHeight = parentHeight - headerHeight;
        for (let i = 1; i <children.length; ++i) {
          children[i].$el.style.height = `${adjustHeight}px`;
        }
      });
    },
    // add to set current tab to exist tab who's title is equal to title
    addTab(title, src) {
      let tab = this.editableTabs.find((e) => e.title == title)
      if (typeof(tab) == "undefined") {
        this.editableTabs.push({
          title: title,
          name: title,
          src: src,
          closable: this.editableTabs.length != 0
        });
        this.adjustIframe()
      }
      this.currentTab = title;
    },
    // just a convinient method
    addTabs(tabsData) {
      for (tabData in tabsData) {
        addTab(tabData.title, tabData.src);
      }
    },
    // remove the specified tab
    removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      this.editableTabsValue = activeName;
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
    },
    // menu triggered handler
    triggerSubMenu(ev, indexPath, v) {
      this.addTab(ev, v.$el.getAttribute('action'));
    }
  }
}
</script>

<style>
#container-wrapper .el-main .el-tabs {
  position: absolute;
  width: 100%;
  height: 100%;
  border: none;
}

#container-wrapper .el-tabs__header {
  padding: 0;
}

#container-wrapper .el-tabs__content {
  padding: 0;
}

#container-wrapper .el-tab-pane {
  padding: 0;
  height: 100%;
  width: 100%;
}

#container-wrapper .el-main iframe {
  width: 100%;
  height: 100%;
  border: none;
}
</style>

<style scoped>

@value colors: "../css/colors.css";
@value lightblack from colors;

#container-wrapper {
  height: 100%;
}

.el-header {
  padding: 0;
  background-color: lightblack;
}

.header-left .el-button {
  float: left;
}

.header-right .el-button {
  float: right;
}

.el-aside {
  background-color: lightblack;
}

.el-main {
  padding: 0;
  position: relative;
}

.el-menu {
  border-right-color: #424F63;
}

.el-footer {
  background-color: lightblack;
}

</style>